<template>
  <div class="yy-page yy-base-category">
    <div class="yy-page-header" style="flex: 0 0 50px;">
      <div class="yy-page-header_title">大屏管理</div>
      <div class="yy-page-header_action">
        <el-button  @click="getScreenList()">刷新</el-button>
        <el-button color="#009688" @click="onOpenDialog()">新增大屏</el-button>
      </div>
    </div>
    <div class="yy-page-data" style="flex:1; min-height: 0;">
       <WidgetTable :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>
    <WidgetFormDialog ref="widgetFormDialogRef"
                      :form-fields="dialog.formFields"
                      :model-instance="dialog.modelInstance"
                      :save-api-fun="dialog.saveApiFun"
                      :update-api-fun="dialog.updateApiFun"
                      :option="{
                      businessName: '大屏',
                      formLabelWidth: '80px'
                    }"
                      @edit-callback="onEditCallback"
    />
  </div>
</template>

<script setup lang="ts">

import {onBeforeMount, reactive, ref} from "vue";
import {TableColumn, WidgetFormField} from "@/model/Definition";
import {BaseModel} from "@/model/BaseModel";
import {formatDate} from "@/utils/yayi";
import {ElMessage} from "element-plus";
import ScreenApi from "@/api/queue/ScreenApi";
import {QueueScreenModel} from "@/model/QueueScreenModel";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import WidgetFormDialog from "@/components/widget/WidgetFormDialog.vue";
import ScreenConfig from "@/views/queue/screen/ScreenConfig.vue";

const dialog = reactive<{formFields: WidgetFormField[],modelInstance: BaseModel, saveApiFun: any, updateApiFun: any}>({
  modelInstance: new QueueScreenModel(),
  saveApiFun: ScreenApi.saveScreen,
  updateApiFun: ScreenApi.updateScreen,
  formFields: [
    {field: 'name', label: '名称', type: 'text', placeholder: '请输入名称', required: [{required: true, message: '名称不能为空', trigger: 'blur'}]},
    {field: 'code', label: '代码', type: 'text', placeholder: '请输入代码', required: [{required: true, message: '代码不能为空', trigger: 'blur'}]},
    {field: 'url', label: '访问地址', type: 'text', placeholder: '请输入地址', required: [{required: true, message: '访问地址不能为空', trigger: 'blur'}]},
    {field: 'config', label: '设备配置', type: 'template', component: ScreenConfig},
    {field: 'keywords', label: '检索码', type: 'text', placeholder: '请输入检索码'},
    {field: 'state', label: '状态', type: 'radioGroup', initVal: 1, options: [{label: '启用', value: 1}, {label: '停用', value: 0}]}
  ]
})

const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: QueueScreenModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "align": 'center',
      "width": 60,
      "fixed": 'left'
    },
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"code",
      "label":"代码",
      "showable":true
    },
    {
      "field":"url",
      "label":"访问地址",
      "showable":true
    },
    {
      "field":"keywords",
      "label":"检索码",
      "showable":true
    },
    {
      "field":"updateBy",
      "label":"更新用户",
      "showable":true,
      "width": 120
    },
    {
      "field":"updateTime",
      "label":"更新时间",
      "showable":true,
      "width": 140
    },
    {
      "field":"state",
      "label":"状态",
      "showable":true,
      "width": 80,
      "fixed": 'right'
    },
    {
      "field":"action",
      "label":"操作",
      "width": 200,
      "showable":true,
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false,
  },
  data: [],
  formats: {
    'state': {
      textType:'text',
      typeFormat: QueueScreenModel.getStateType,
      labelFormat: QueueScreenModel.getStateLabel
    },
    'lastConnectTime': {
      labelFormat: (val) =>formatDate(val)
    },
    'updateTime': {
      labelFormat: (val) =>formatDate(val)
    },
    'action': {
      items: [
        {label: '预览', elType: 'button', type: 'warning', value: 'preview', atClick: (screen: QueueScreenModel) => {
            window.open(screen.url)
          }
        },
        {label: '编辑', elType: 'button', value: 'edit', atClick: (screen: QueueScreenModel) => onOpenDialog(screen)},
        {label: '删除', elType: 'button', value: 'delete',  confirm: {title: '您确定要删除改类目吗？', atConfirm: (screen: QueueScreenModel) => onDeleteCategory(screen)}}
      ]
    }
  }
})

const widgetFormDialogRef = ref()

onBeforeMount(() => {
  getScreenList()
})

const getScreenList = (pageIndex = 1) => {
  table.isLoading = true
  ScreenApi.listScreen(null).then((data) => {
    table.data = data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onPageChange = (pageIndex: number) => {
  if (pageIndex != table.paging.pageIndex) {
    getScreenList(pageIndex);
  }
}

const onOpenDialog = (screen?: QueueScreenModel) => {
  widgetFormDialogRef.value.onShowDialog(screen)
}

const onDeleteCategory = (screen: QueueScreenModel) => {
  ScreenApi.deleteScreen(screen.id).then(() => {
    const index = table.data.findIndex(item => item.id === screen.id);
    table.data.splice(index, 1)
    ElMessage.success({
      message: '设备删除成功',
      showClose: true
    })
  })
}


const onEditCallback = (screen: QueueScreenModel) => {
  const index = table.data.findIndex(item => item.id === screen.id);
  if (index < 0) {
    table.data.unshift(screen)
  } else {
    table.data.splice(index, 1, screen)
  }
}
</script>

<style scoped lang="scss">
.yy-base-category {
  height: 100%;
}
</style>
